import 'package:demo_app_video/page/videos/videos_lists_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:demo_app_video/commons/router/routes.dart';
import 'package:demo_app_video/commons/http/http.dart';

class VideoPage extends StatefulWidget {
  const VideoPage({Key? key}) : super(key: key);

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage>
    with AutomaticKeepAliveClientMixin {
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  var video_cate_index = '';
  List cates = [];

  List<Widget> pages = [];
  PageController _pageController = PageController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    initData();
  }

  initData() async {
    await get_cates();
  }

  get_cates() async {
    var resultData = await HttpUtil.getInstance().get('shortplay/category');

    if (resultData['code'] == 1) {
      cates = resultData['data'];
      cates[0]['id'] = '11111111111';
      video_cate_index = cates[0]['id'];

      for (int index = 0; index < cates.length; index++) {
        cates[index]['index_page'] = index;
        pages.add(VideosListsData(
          cid: cates[index]['id'].toString(),
        ));
      }
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      body: Container(
        width: double.infinity,
        padding:
            EdgeInsets.only(top: MediaQuery.of(context).padding.top + 10.h),
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
          Color(0xffFFF4E6),
          Color(0xffFCFBF8),
        ], begin: Alignment.centerRight, end: Alignment.centerLeft)),
        child: Column(
          children: [
            GestureDetector(
              child: Container(
                width: 328.w,
                height: 40.h,
                decoration: BoxDecoration(
                    color: Color(0xffFFFFFF),
                    borderRadius: BorderRadius.circular(24.sp)),
                padding: EdgeInsets.only(left: 12.w, right: 12.w),
                child: Row(
                  children: [
                    Text(
                      '恭喜发财',
                      style:
                          TextStyle(color: Color(0xff999999), fontSize: 14.sp),
                    ),
                    Expanded(child: Container()),
                    Image.asset(
                      'images/search_icon.png',
                      width: 20.w,
                    ),
                  ],
                ),
              ),
              onTap: () {
                // asdsadasdasdas
                Routes().pushNoParams(context, Routes.search_details);
              },
            ),
            Container(
              margin: EdgeInsets.only(top: 10.h),
              child: SingleChildScrollView(
                padding: EdgeInsets.only(left: 20.w),
                scrollDirection: Axis.horizontal,
                child: Row(
                    children: cates
                        .map((item) => InkWell(
                              child: Container(
                                margin: EdgeInsets.only(right: 8.w),
                                padding: EdgeInsets.only(
                                    top: 5.h,
                                    bottom: 5.h,
                                    left: 15.w,
                                    right: 15.w),
                                decoration: BoxDecoration(
                                    color: video_cate_index ==
                                            item['id'].toString()
                                        ? Color(0xffFED3BB)
                                        : Color(0xffFFFFFF),
                                    borderRadius: BorderRadius.circular(32.sp)),
                                child: Text(
                                  "${item['tag_name']}",
                                  style: TextStyle(
                                      color: video_cate_index ==
                                              item['id'].toString()
                                          ? Color(0xffFF0000)
                                          : Color(0xff333333),
                                      fontSize: 12.sp),
                                ),
                              ),
                              onTap: () async {
                                if (video_cate_index != item['id'].toString()) {
                                  video_cate_index = item['id'].toString();
                                  setState(() {});
                                  _pageController
                                      .jumpToPage(item['index_page']);
                                }
                              },
                            ))
                        .toList()),
              ),
            ),
            Container(
              height: 12.h,
            ),
            Expanded(
                child: PageView(
              children: pages,
              physics: const NeverScrollableScrollPhysics(),
              controller: _pageController,
            )),
          ],
        ),
      ),
    );
  }
}
